<template>
	<div class="personal">
		<div class="banner"></div>
		<div class="tab-box">
			<div class="tab-wrap">
				<div class="tab-menu">
					<div class="tab-item active">个人中心</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="content-wrap">
				<div class="personal-info">
					<fieldset>
						<legend>个人信息</legend>
						<el-form ref="form" :model="userForm" label-width="80px">
							<el-row>
								<el-col :span="12">
									<el-form-item label="用户昵称">
										<el-input v-model="userForm.name" placeholder="请输入用户昵称"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="性别">
										<el-radio-group v-model="userForm.sex">
										<el-radio label="1">男</el-radio>
										<el-radio label="2">女</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12">
									<el-form-item label="邮箱">
										<el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="电话">
										<el-input v-model="userForm.phone" placeholder="请输入电话"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item>
								<el-button type="danger" @click="handleSaveUserInfo()">保存</el-button>
							</el-form-item>
						</el-form>
					</fieldset>
				</div>
				<div class="password-info">
					<fieldset>
						<legend>密码修改</legend>
						<el-form ref="form" :model="passForm" label-width="80px">
							<el-row>
								<el-col :span="8">
									<el-form-item label="原密码">
										<el-input v-model="passForm.password" placeholder="请输入原密码"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="新密码">
										<el-input v-model="passForm.newpwd" placeholder="请输入新密码"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="确认密码">
										<el-input v-model="passForm.newpwd2" placeholder="请输入确认密码"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item>
								<el-button type="danger" @click="handlePassword()">保存</el-button>
							</el-form-item>
						</el-form>
					</fieldset>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Personal',
	data() { 
		return {
			//个人信息
			userForm: {
				name: '',
				sex: '1',
				email: '',
				phone: ''
			},
			//密码
			passForm: {
				password: '',
				newpwd: '',
				newpwd2: ''
			}
		}
	},
	mounted() { 
		
	},
	methods: {
		/**
		 * 保存用户信息
		 */
		handleSaveUserInfo() { 

		},
		/**
		 * 保存密码
		 */
		handlePassword() { 

		}
	}
}
</script>

<style lang="scss" scoped>
.personal {
	width: 100%;
	min-height: 760px;
	.banner {
		width: 100%;
		height: 140px;
		background-image: url('~@/assets/images/list-banner.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: -100px;
	}
	.tab-box {
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		.tab-wrap {
			display: flex;
			width: 1460px;
			height: 100%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.tab-menu {
			display: flex;
			height: 100%;
			flex-direction: row;
			align-items: center;
			.tab-item {
				display: flex;
				font-size: 18px;
				font-weight: bold;
				width: 150px;
				text-align: center;
				transition: all .2s;
				cursor: pointer;
				letter-spacing: 2px;
				&.active {
					color: #a6292f;
					font-size: 20px;
				}
			}
		}
	}
	.tab-content {
		width: 100%;
		background: rgba(255,255,255, .9);
		.content-wrap {
			width: 1460px;
			margin: 0 auto;
			padding: 30px 0 50px 0;
		}
		.personal-info {
			fieldset {
				border-color: #a6292f;
				border-width: 1px;
				padding-top: 20px;
			}
			legend {
				color: #a6292f;
			}
		}
		.password-info {
			margin-top: 20px;
			fieldset {
				border-color: #a6292f;
				border-width: 1px;
				padding-top: 20px;
			}
			legend {
				color: #a6292f;
			}
		}
	}
}
::v-deep .personal-info .el-input__inner {
	border-radius: 0;
}
::v-deep .password-info .el-input__inner {
	border-radius: 0;
}
::v-deep .el-button--danger {
	background-color: #a6292f !important;
	border-color: #a6292f !important;
}
</style>